<template>
  <view class="upload-wrap">
    <view class="upload-img-box" v-for="(img, i) in images" :style="style" :key="i">
      <view class="loading" v-if="loading[i]">请稍后</view>
      <c-img mode="aspectFit" class="img" :src="img" @tap="showAction"></c-img>
    </view>
    <view class="upload-img-box upload-box" v-if="images.length < props.maxCount && !props.disabled" @tap="onChooseImage(null)" :style="style">
      <view>
        <c-icon icon="add" :size="80"></c-icon>
        <view v-if="props.maxCount > 1">{{ images.length }}/{{ props.maxCount }}</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { CImg, CIcon } from '.';
import { computed, ref } from 'vue';
import { IMG_PREFIX } from '@/utils/config';
const props = defineProps({
  maxCount: {
    type: Number,
    default: 1
  },
  disabled: Boolean,
  onUpload: Function,
  style: [String, Object]
});

const modelValue = defineModel([Array, String]);
const loading = ref([]);
const images = computed(() => {
  return !modelValue.value ? [] : modelValue.value instanceof Array ? modelValue.value : [modelValue.value];
});

const onChooseImage = index => {
  if (props.disabled) return;
  Taro.chooseImage({
    count: index == null ? props.maxCount - images.value.length : 1,
    sizeType: ['compressed'],
    success: async e => {
      let startIndex = images.value.length;
      loading.value = images.value.map(a => false);
      for (let i = 0; i < e.tempFilePaths.length; i++) {
        const file = e.tempFilePaths[i];
        if (props.maxCount == 1) {
          modelValue.value = file;
        } else {
          if (!modelValue.value) {
            modelValue.value = [];
          }
          if (index == null) {
            loading.value.push(true);
            modelValue.value.push(file);
          } else {
            startIndex = i;
            loading.value[index] = true;
            modelValue.value = [index] = file;
          }
        }
      }
      for (let i = 0; i < e.tempFilePaths.length; i++) {
        const file = e.tempFilePaths[i];
        const img = await props.onUpload(file, e => {
          
        });
        if (props.maxCount == 1) {
          modelValue.value = img;
        } else {
          modelValue.value[startIndex] = img;
          loading.value[startIndex] = false;
          startIndex++;
        }
      }
    }
  });
};

const showAction = i => {
  var list = ['预览', '重新上传', '删除'];
  if (props.disabled) {
    list = ['预览'];
  }
  Taro.showActionSheet({
    itemList: list,
    success(r) {
      if (r.tapIndex == 0) {
        let imgs = images.value.map(img => (!/^[a-f0-9]+$/.test(img) ? img : IMG_PREFIX.value + img));
        Taro.previewImage({
          current: i,
          urls: imgs
        });
      }
      if (r.tapIndex == 1) {
        onChooseImage();
      }
      if (r.tapIndex == 2) {
        if (modelValue.value instanceof Array) {
          modelValue.value.splice(i, 1);
        } else {
          modelValue.value = '';
        }
      }
    }
  });
};
</script>
<style lang="scss">
.upload-wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 5px 5px 20px;

  .upload-img-box {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    border: var(--onepx) solid var(--color-line);
    margin-right: 15px;
    margin-bottom: 15px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .loading {
      position: absolute;
      text-align: center;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      font-size: 22px;
      color: var(--color-caption);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-color: rgba(0, 0, 0, 0.6);
      background-image: var(--loading-img);
      + .img {
        filter: blur(8px);
      }
    }
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .upload-box {
    border: var(--onepx) dashed var(--color-primary);
    color: var(--color-gray2);
    font-size: 22px;
    text-align: center;
  }
}
</style>
